// @ts-ignore
import {defineStore} from "pinia";
import {ThemeConfigState, UserState} from "/@/type/pinia";

export const useThemeConfig = defineStore('themeConfig', {
    state: () : ThemeConfigState => ({
        themeConfig: {
            // 主题颜色
            theme: true,
            // 是否显示banner
            banner: false,
            // 是否显示背景图
            showBackImg: true,
            // 组件是否透明
            componentOpacity: false,
            // 菜单模式
            menuMode: 'vertical', // horizontal vertical
            // 布局
            layout: 'layout1',
            // 侧边栏颜色 rgba值
            siderColor: '',
            // 顶栏颜色 rgba值
            topBarColor: '',
            // 内容区域背景颜色 rgba值
            contentColor: '',
            common: {
                name: "common",
                fontFamily: "'Courier New', Courier, monospace", // 更改为等宽字体以增加酷炫感
                fontFamilyMono: "'Courier New', Courier, monospace",
                fontWeight: "500", // 增加字重
                fontWeightStrong: "600",
                cubicBezierEaseInOut: "cubic-bezier(.4, 0, .2, 1)",
                cubicBezierEaseOut: "cubic-bezier(0, 0, .2, 1)",
                cubicBezierEaseIn: "cubic-bezier(.4, 0, 1, 1)",
                borderRadius: "3px",
                borderRadiusSmall: "2px",
                fontSize: "16px", // 增大字号
                fontSizeMini: "14px",
                fontSizeTiny: "14px",
                fontSizeSmall: "16px",
                fontSizeMedium: "16px",
                fontSizeLarge: "18px",
                fontSizeHuge: "20px",
                lineHeight: "1.6",
                heightMini: "18px", // 调整高度
                heightTiny: "24px",
                heightSmall: "30px",
                heightMedium: "36px",
                heightLarge: "42px",
                heightHuge: "48px",
                baseColor: "#282a36", // 使用类似于滤镜直接视图暗黑主题的基底颜色值
                primaryColor: "#50fa7b", // 醒目的绿色作为主要色调
                primaryColorHover: "#5af78e",
                primaryColorPressed: "#3f7a55",
                primaryColorSuppl: "#5af78e",
                infoColor: "#bd93f9", // 温和的紫色作为提示信息色调
                infoColorHover: "#caa9fa",
                infoColorPressed: "#8765b2",
                infoColorSuppl: "#caa9fa",
                successColor: "#50fa7b",
                successColorHover: "#5af78e",
                successColorPressed: "#3f7a55",
                successColorSuppl: "#5af78e",
                warningColor: "#f1fa8c", // 醒目的黄色作为警告色调
                warningColorHover: "#f6faaa",
                warningColorPressed: "#ab9c5c",
                warningColorSuppl: "#f6faaa",
                errorColor: "#ff5555", // 醒目的红色作为错误信息色调
                errorColorHover: "#ff6f6f",
                errorColorPressed: "#aa3939",
                errorColorSuppl: "#ff6f6f",
                textColorBase: "#f8f8f2", // 浅色的文字针对深色背景
                textColor1: "#e9e9f4",
                textColor2: "#cdcdde",
                textColor3: "#a8a8c1",
                textColorDisabled: "#6c6c80",
                placeholderColor: "#6c6c80",
                placeholderColorDisabled: "#45455e",
                iconColor: "#6c6c80",
                iconColorHover: "#828299",
                iconColorPressed: "#9292a9",
                iconColorDisabled: "#45455e",
                opacity1: "0.82",
                opacity2: "0.72",
                opacity3: "0.38",
                opacity4: "0.24",
                opacity5: "0.18",
                dividerColor: "#5f5f6f",
                borderColor: "#5f5f6f",
                closeIconColor: "#6c6c80",
                closeIconColorHover: "#828299",
                closeIconColorPressed: "#9292a9",
                closeColorHover: "#42445a",
                closeColorPressed: "#303240",
                clearColor: "#6c6c80",
                clearColorHover: "#828299",
                clearColorPressed: "#9292a9",
                scrollbarColor: "#0e0e10",
                scrollbarColorHover: "#21222e",
                scrollbarWidth: "5px",
                scrollbarHeight: "5px",
                scrollbarBorderRadius: "5px",
                progressRailColor: "#0e0e10",
                railColor: "#0e0e10",
                popoverColor: "#282a36",
                tableColor: "#282a36",
                cardColor: "#282a3681",
                modalColor: "#282a36",
                bodyColor: "#0e0e1000",
                tagColor: "#282a36",
                avatarColor: "#5f5f6f",
                invertedColor: "#f8f8f2",
                inputColor: "#282a36",
                codeColor: "#282a36",
                tabColor: "#282a36",
                actionColor: "#282a3681",
                tableHeaderColor: "#282a36",
                hoverColor: "#313341",
                tableColorHover: "#313341",
                tableColorStriped: "#313341",
                pressedColor: "#313341",
                opacityDisabled: "0.4",
                inputColorDisabled: "#282a36",
                buttonColor2: "#4e4f63",
                buttonColor2Hover: "#6c6d87",
                buttonColor2Pressed: "#3c3d53",
                boxShadow1:
                  "0 1px 2px 0 rgba(0, 0, 0, .16), 0 1px 3px 0 rgba(0, 0, 0, .23)",
                boxShadow2:
                  "0 2px 4px 0 rgba(0, 0, 0, .12), 0 2px 10px 0 rgba(0, 0, 0, .08)",
                boxShadow3:
                  "0 3px 14px 2px rgba(0, 0, 0, .1), 0 3px 6px -4px rgba(0, 0, 0, .5)",
              }
        },
    }),
    actions: {
        setThemeConfig(data:ThemeConfigState) {
            // @ts-ignore
            this.themeConfig = data
        },
        clearThemeConfig() {
            this.themeConfig = {
                theme: true,
                banner: false,
                showBackImg: true,
                componentOpacity: false,
                menuMode: 'vertical', // horizontal vertical
                layout: 'layout1',
                siderColor: '',
                topBarColor: '',
                contentColor: '',
            }
        }
    },
    // 持久化
    // persist: {
    //     enabled: true,
    //     strategies: [
    //         {
    //             key: 'themeConfig', // 存储在localStorage的key值
    //             paths: ['themeConfig'], // 需要持久化的数据
    //             storage: window.localStorage, // 指定持久化存储的对象
    //         },
    //     ],
    // }
})

export const useUserConfig = defineStore('user', {
    state: () : UserState => ({
        userInfo: {
            id: -1,
            username: 'HZ',
            avatar: '',
            token: null,
            date_joined: '',
            last_login: '',
            email: '',
            is_active: false,
            is_staff: false,
            is_superuser: false,
            groups: [],
        }
    }),
    actions: {
        setUserInfo(data:UserState) {
            // @ts-ignore
            this.userInfo = data
        },
        clearUserInfo() {
            this.userInfo = {
                id: -1,
                username: '',
                avatar: '',
                token: null,
                date_joined: '',
                last_login: '',
                email: '',
                is_active: false,
                is_staff: false,
                is_superuser: false,
                groups: [],
            }
        }
    },
    // 持久化
    persist: {
        enabled: true,
        strategies: [
            {
                key: 'userInfo', // 存储在localStorage的key值
                paths: ['userInfo'], // 需要持久化的数据
                storage: window.localStorage, // 指定持久化存储的对象
            },
        ],
    }
})
